Day_8 Javascript基本架構示例

2023 iThome 鐵人賽

DAY 8

Modern Web

三十天持續努力挑戰py系列第 8 篇

15th鐵人賽

clevens1008

團隊NUTC_IMAC_WEB_桑貝比

2023-09-23 00:03:06

300 瀏覽

分享至

JavaScript（通常簡稱為JS）是一種流行的網頁編程語言，它用於使網頁具有互動性和動態性。以下是對JavaScript的簡要介紹：
1. 網頁互動性： JavaScript使您能夠為網頁添加互動性元素，例如表單驗證、按鈕點擊、動畫效果等。這意味著用戶可以與網頁進行互動，而不僅僅是被動地閱讀內容。
2. 客戶端腳本語言： JavaScript主要在網頁瀏覽器中運行，這使得它成為一種客戶端腳本語言。這意味著它在用戶的瀏覽器上運行，而不需要在伺服器上進行額外的處理。這有助於提高網頁的性能和反應速度。
3. 基於事件驅動： JavaScript是事件驅動的語言。它可以響應用戶的操作，例如單擊按鈕、輸入表單數據或鍵盤輸入，並根據這些事件執行相應的操作。
4. 動態HTML操作： JavaScript可以用於操作HTML和CSS，以實現動態效果。您可以通過JavaScript來添加、刪除或修改HTML元素，並動態更改CSS樣式，以實現頁面的變化。
5. 常用於前端開發： JavaScript通常用於前端網頁開發，與HTML和CSS一起用於創建完整的網頁應用程序。然而，它也可以在後端使用（例如Node.js），用於伺服器端開發。
- 以下是一個簡單的小應用，內容是按下一個button已更改id=demo裡面的文本。
```
    <!DOCTYPE html>
    <html>

    <head>
        <title>動態HTML操作示例</title>
    </head>

    <body>
        <h1 id="demo">這是一個動態HTML操作示例</h1>
        <button onclick="changeText()">更改文本</button>
        <script>
            function changeText() {
                // 選擇具有id="demo"的元素
                var element = document.getElementById("demo");

                // 更改元素的文本內容
                element.innerHTML = "文本已更改！";
            }
        </script>
    </body>

    </html>
```
- 這是把script直接寫到html裡面，一些簡單的應用可以這樣會比較好閱讀，但當程式碼越來越大的話反而會不易閱讀，所以這時可以向css那樣把JS單獨獨立一個檔案，然後再用html讀取即可。
```
<!DOCTYPE html>
<html>

<head>
    <title>動態HTML操作示例</title>
</head>

<body>
    <h1 id="demo">這是一個動態HTML操作示例</h1>
    <button onclick="changeText()">更改文本</button>

</body>
<script src="myjs.js"></script>
</html>
```
JS檔案
```
function changeText() {
// 選擇具有id="demo"的元素
var element = document.getElementById("demo");

// 更改元素的文本內容
element.innerHTML = "文本已更改！";
}
```